---
import BaseLayout from "../layouts/BaseLayout.astro";

const pageTitle = "关于我";
const identity = {
  firstName: "BlogUser",
  country: "China",
  occupation: "技术撰稿人",
  hobbies: ["编程", "摄影", "独立游戏"],
};

const skills = [
  "HTML",
  "CSS",
  "JavaScript",
  "React",
  "Astro",
  "Java",
  "Spring",
];

// skills styles
const skillColor = "green";
const skillFontWeight = "bold";
const textCase = "uppercase";
---

<BaseLayout pageTitle={pageTitle}>
  <h2>……和我的新 Astro 网站！</h2>

  <p>
    我正在学习 Astro
    的入门教程。这是我网站上的第二个页面，也是我自己建立的第一页面！
  </p>

  <p>随着我完成更多教程，该站点将更新，所以请继续查看我的旅程将如何进行吧！</p>

  <p>以下是关于我的几个事实：</p>
  <ul>
    <li>我的名字是{identity.firstName}.</li>
    <li>我住在{identity.country}。我的职业是{identity.occupation}。</li>
    {
      identity.hobbies.length >= 2 && (
        <li>
          我的两个习惯：{identity.hobbies[0]}和{identity.hobbies[1]}
        </li>
      )
    }
  </ul>
  <p>我的技能是：</p>
  <ul>
    {skills.map((skill) => <li class="skill">{skill}</li>)}
  </ul>
</BaseLayout>
<style define:vars={{ skillColor, skillFontWeight, textCase }}>
  .skill {
    color: var(--skillColor);
    font-weight: var(--skillFontWeight);
    text-transform: var(--textCase);
  }
</style>
